<template>
 <div class="box">
   <div class="traceCode1">
     <el-tag type="success">旧追溯码</el-tag>
     <el-input
         type="textarea"
         :rows="6"
         placeholder="请输入内容"
         v-model.trim="oldTrace"
         maxlength="65"
         @blur="getMessage()"
         show-word-limit
     >
     </el-input>
   </div>
   <div class="traceCode2">
     <el-tag>新追溯码</el-tag>
     <el-input
         type="textarea"
         :rows="6"
         placeholder="请输入内容"
         v-model.trim="newTrace"
         maxlength="65"
         show-word-limit
     >
     </el-input>
   </div>
   <div class="button">
     <el-button type="primary" @click="change()">修改追溯</el-button>
   </div>
 </div>
  <div class="message" v-if="data != null">
    <el-form :model="data" label-width="80px">
          <el-form-item label="箱号:">{{data.boxNo}}</el-form-item>
          <el-form-item label="物料编码:">{{data.materialNo}}</el-form-item>
          <el-form-item label="生产任务:">{{data.taskBillNo}}</el-form-item>
    </el-form>
  </div>
</template>

<script>
import BatchAddRowDialog from "../components/batchAddRowDialog.vue";

export default {
  name: "changeTraceCode",
  data() {
    return {
      loading:false,
      oldTrace:'',
      newTrace:'',
      data:null
    }
  },
  methods:{
    async change(){
      this.loading = true
      let param = {oldTrace : this.oldTrace,newTrace:this.newTrace}
      try {
        let res = await this.callApi('change_traceCode',param)
        if (!res.res) return
        this.$message.success('修改成功')
      }finally {
        this.loading = false
      }
    },
    async getMessage(){
      this.loading = true
      let param = {traceBackNo : this.oldTrace}
      try {
        let res = await this.callApi('get_detail_by_trace',param)
        if (!res.res) return
        console.log(res)
        this.data = res.data
      }finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.box{
  float: left;
  display: inline-block;
  width: 60%;
}
.traceCode1{
  margin-top: 20px;
  width: 100%;
  height: 50%;

}
.traceCode2{
  margin-top: 30px;
  width: 100%;
}
.button{
  margin-top: 50px;
}
.message{
  float: right;
  display: inline-block;
  margin-top: 50px;
  margin-right: 50px;
  width: 20%;
}
</style>